<template>
  <div>
    <div v-show="!empty" ref="chartContainer" :style="{ width: '100%', height: '300px' }" />
    <px-empty v-if="empty" description="暂无数据" />
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, watch, onMounted, type Ref } from "vue";

import { useEchartsResize } from "@/hooks/useEchartsResize";
import type { ResponseDataOfInAndOutCountTrend } from "@/api/erc/spareParts/signboard";

import type { InAndOutCountType, LevelType } from "../type";

type DataType = InAndOutCountType<ResponseDataOfInAndOutCountTrend>;

interface PropsType {
  data?: DataType;
  level: LevelType;
}

interface EmitsType {
  (e: "updateLevel", level: LevelType): void;
}

const props = defineProps<PropsType>();
const emits = defineEmits<EmitsType>();

const empty = ref(false);
const chartContainer: Ref<HTMLElement | null> = ref(null);
const chartInstance: Ref<echarts.ECharts | null> = ref(null);

const dataMap: Map<string, DataType> = new Map();

const options: echarts.EChartsOption = {
  tooltip: {
    trigger: "item",
    axisPointer: {
      type: "shadow"
    }
  },
  color: ["#4786FF", "#14C7C7 "],
  legend: {},
  grid: {
    bottom: "0%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    data: []
  },
  yAxis: {
    type: "value"
  }
};

useEchartsResize(chartInstance, chartContainer, options);

const isEmpty = data => {
  let flag = true;
  if (data?.yData?.length) {
    data.yData.forEach(item => {
      if (item?.data?.length) {
        item.data.forEach(count => {
          if (count > 0) {
            flag = false;
          }
        });
      }
    });
  }

  return flag;
};

const renderChart = (data): void => {
  if (!isEmpty(data)) {
    empty.value = false;
    chartInstance.value.setOption({
      xAxis: {
        type: "category",
        data: data.xData || []
      },
      series: data.yData || []
    });
  } else {
    empty.value = true;
    emits("updateLevel", "MONTH");
  }
};

const formatData = () => {
  if (props.data.dayTrend) {
    Object.keys(props.data.dayTrend).forEach(key => {
      const data = props.data.dayTrend[key];
      if (data) {
        const obj = {
          xData: data.keyList,
          yData: [
            {
              name: "入库",
              type: "bar",
              data: data.inNumList
            },
            {
              name: "出库",
              type: "bar",
              data: data.outNumList
            }
          ],
          dayTrend: data.dayTrend
        };
        if (!dataMap.get(key)) {
          dataMap.set(key, obj);
        }
      }
    });
  }
};

const initChart = () => {
  if (props.data) {
    renderChart(props.data);
  }
};

const initEventListener = () => {
  chartInstance.value.on("click", params => {
    const name = params.name;
    if (props.level === "MONTH") {
      emits("updateLevel", "DAY");
      const data = dataMap.get(name);
      renderChart(data);
    }
  });
};

watch(
  () => props.data,
  () => {
    initChart();
    formatData();
  },
  {
    deep: true
  }
);

watch(
  () => props.level,
  () => {
    if (props.level === "MONTH") {
      renderChart(props.data);
    }
  }
);

onMounted(() => {
  initChart();
  initEventListener();
});
</script>
